<template>
  <div class="detailbox">
    <div class="headr">
      <b style="font-size: 24px;" v-if="showflag">添加教师</b>
      <b style="font-size: 24px;" v-if="!showflag">修改当前教师信息</b>
      <b style="font-size: 24px;" @click="back">返回</b>
    </div>
    <div class="teacherdetailForm">
      <el-form ref="formData" :model="formData" class="form" :rules="rules">
        <el-form-item label="姓名:" prop="teacherName">
          <el-input v-model="formData.teacherName" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄:" prop="teacherAge">
          <el-input v-model="formData.teacherAge" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="性别:" prop="teacherSex">
          <el-select v-model="formData.teacherSex" placeholder="请选择性别">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式:" prop="teacherTel">
          <el-input v-model="formData.teacherTel" placeholder="请输入联系方式"></el-input>
        </el-form-item>
        <el-form-item label="职称:" prop="teacherPosition">
          <el-input v-model="formData.teacherPosition" placeholder="请输入职称"></el-input>
        </el-form-item>
        <el-form-item label="教学科目:" prop="subjectId">
          <!-- <el-select v-model="formData.teasub" placeholder="请选择教学科目" >
            <el-option :label="x.subName" :value="x.subId" v-for="x in subjectoptions" :key="x.value"></el-option>
          </el-select> -->
          <el-select v-model="formData.subjectId" placeholder="请选择教学科目">
            <el-option :label="x.subjectName" :value="x.subjectId" v-for="x in subjectList" :key="x.subjectId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责班级:" prop="classId">
          <template>
              <el-checkbox-group v-model="formData.classId">  
                  <el-checkbox :label="x.classId" v-for="(x,index) in classList" :value="x.classId" :key="index">{{ x.className }}</el-checkbox> 
              </el-checkbox-group>     
            </template>
        </el-form-item>

        <el-form-item label="权限:" prop="roleId">
          <el-select v-model="formData.roleId" placeholder="教师">
            <el-option :label="x.roleName" :value="x.roleId" v-for="x in roleList" :key="x.roleId"></el-option>
          </el-select>
        </el-form-item>
           <!-- 数字，字母 或者下划线 -->
        <el-form-item label="账号:" prop="userAccount"  v-if="showflag">
          <el-input v-model="formData.userAccount" placeholder="请输入账号"></el-input>
        </el-form-item>
        <!-- 6位数字 -->
        <el-form-item label="密码:" prop="userPassword"  v-if="showflag">
          <el-input v-model.number="formData.userPassword" placeholder="请输入密码" type="password" ></el-input>
        </el-form-item>
        <div class="btngroup">
          <button class="go btn" @click.prevent="createteacher('formData')" v-if="showflag">立即添加</button>
          <button class="go btn" @click.prevent="updateTeacher('formData')" v-if="!showflag">立即修改</button>
          <button class="cancel btn" @click="resetForm()">取消</button>
        </div>
      </el-form>
      
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      roleIds:[3],
      Rolelists:['教师'], //显示的权限
      names:"", //权限名字
      RolelistsArr:[],//循环的权限
      RolelistsArrTwo:[],
      dialogRole:false,
      showflag: true,
      dialogFormVisible:false,
      baseUrl: require("../js/baseUrl.js").baseUrl,
      teaId: 0,
      checkList2:[],
      subjectoptions:[],
      classList:[],
      subjectList:[],
      roleList:[],
      teaSubs:[],
      oldsubjectId:"",
      oldclassId:[],
      oldroleId:"",
      formData: {
        teacherName: "",
        teacherAge: "",
        teacherSex: "",
        teacherTel: "",
        teacherPosition: "",
        userAccount: "",
        className:"",
        teacherId:"",
        subjectId:"",
        classId:[],
        roleId:""
      },
      rules: {
        teaName: [
          { required: true, message: '请填写名字', trigger: 'blur' },
      
        ],
        teaAge: [
          { required: true, message: '请选择年龄', trigger: 'blur' },
          { pattern: /^\d{2}$/, message: '请输入两位数字', trigger: 'blur'  }
        ],
        teaSex: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ],
        teaPhone: [
          { required: true, message: '请填写联系方式', trigger: 'blur' },
          { pattern: /^\d{11}$/, message: '请输入11位数字', trigger: 'blur'  }
        ],
        teaTitle: [
          { required: true, message: '请选择职称', trigger: 'blur' }
        ],
        teaClass: [
          { required: true, message: '请选择管理班级', trigger: 'blur' }
        ],
        accountNumber: [
          { required: true, message: '请输入值', trigger: 'blur'},
          { pattern: /^[a-zA-Z0-9_]+$/, message: '只能包含数字、字母和下划线', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入值', trigger: 'blur' },
          { pattern: /^\d{6}$/, message: '请输入6位数字', trigger: 'blur'  }
         ]
      }
    }
  },
  methods: {
    findRoleName(){
      this.rolenames=""
      this.classIds=[]
      this.RolelistsArr.forEach(v=>{
        if(this.classList[0]==v.className){
          this.roleIds.push(v.roleId)
        }
      })
      // this.RolelistsArr=this.RolelistsArr.filter(v=>v.roleName!="教师")
      for(var i=0;i<this.classList.length;i++){
        if(i>0){
          this.className=this.className+" / "
        }

        this.className=this.className+this.classList[i]
        this.RolelistsArr.forEach(v=>{
          if(this.classList[i]==v.className){
            this.roleIds.push(v.roleId)
          }
        })
      }
    },
    //查询用户权限
    // /SchoolSys/role/findAll
    findRole(){
      this.$http.post(this.baseUrl+"teacher/roleSelect",{
      }).then(res=>{
        if(res.data.code==200){
          this.roleList=res.data.data
        }
      })
    },
    findRoleTwo(){
      this.$http.post(this.baseUrl+"SchoolSys/role/findAll",{
        status:0
      }).then(res=>{
        if(res.data.code==200){
          this.RolelistsArrTwo=res.data.data
        }
      })
    },
    addRoleName(){
      this.dialogRole=false
      //根据权限id查名字
      this.findRoleName()

    },
    //显示科目名字
    showSubName(){
      this.rolelist=""
      this.teaSubs=[]
      for(var i=0;i<this.checkList2.length;i++){
        if(i>0){
          this.rolelist=this.rolelist+" / "
        }
        this.rolelist=this.rolelist+this.checkList2[i]
        this.subjectoptions.forEach(v=>{
          if(this.checkList2[i]==v.subName){
            this.teaSubs.push(v.subId)
          }
        })
      }
    },
    addrole(){
      this.dialogFormVisible=false
      this.showSubName()
    },
    show(){
      this.dialogFormVisible=true
    },
    // 打开权限
    showrole(){
      this.dialogRole=true
    },
    back() {
      this.$router.push("/teachermanager")
    },
    //添加教师
    createteacher(formData) {
      if(this.roleIds.length==0){
        this.$message.error("请填写完整信息")
      }else{
        this.$refs[formData].validate((valid) => {
        if (valid) {
          this.addTea()
        }
        });
      }
    },
    //修改教师
    updateTeacher(formData){
      this.$refs[formData].validate((valid) => {
        if (valid) {
          // /SchoolSys/upTea
          this.setupTea()
        } else {
          this.$message.error("请填写全部信息")
          return false;
        }
      });
      },
    resetForm() {
      this.$router.push("/teachermanager")
    },
       //获得职称列表
    // gettitleList(){
    //   this.$http.post(this.baseUrl+"SchoolSys/titleList",{

    //   }).then(res=>{
    //     if(res.data.code==200){
    //       this.titleList=res.data.data
    //     }
    //   })
    // },
    //添加教师
    
    addTea(){
      console.log(this.formData)
      this.$http.post(this.baseUrl+"teacher/insertTeacher",{ 
        teacherName:this.formData.teacherName,
        teacherTel:this.formData.teacherTel,
        subjectId:this.formData.subjectId,
        teacherSex:this.formData.teacherSex,
        teacherAge:this.formData.teacherAge,
        teacherPosition:this.formData.teacherPosition,
        userPassword:this.formData.userPassword+"",
        userAccount:this.formData.userAccount,
        roleId:this.formData.roleId,
        classId:this.formData.classId
      }).then(res=>{
        if(res.data.code==200){
          this.oldsubjectId=this.formData.subjectId
          this.oldclassId=this.formData.classId
          this.oldroleId=this.formData.roleId
          this.$message.success("添加成功")
            setTimeout(() => {
              this.$router.push("/teachermanager")
            }, 1000);
        }else{
          this.$message.error(res.data.msg)
        }
      })
    },
    // 修改教师信息
    setupTea(){
        this.$http.post(this.baseUrl+"teacher/updateTeacher",{
          teacherId: Number(this.teaId),
          teacherName:this.formData.teacherName,
          teacherTel:this.formData.teacherTel,
          subjectId:this.formData.subjectId,
          teacherSex:this.formData.teacherSex,
          teacherAge:this.formData.teacherAge,
          teacherPosition:this.formData.teacherPosition,
          userPassword:this.formData.userPassword+"",
          userAccount:this.formData.userAccount,
          roleId:this.formData.roleId,
          classId:this.formData.classId
        }).then(res=>{
          if(res.data.code==200){
            this.$message.success("修改成功")
            setTimeout(() => {
              this.$router.push("/teachermanager/teachermanager2")
            }, 1000);
          }
        })
    },
    //获取已有科目
    getcourse() {
      this.$http.post(this.baseUrl + "teacher/subjectSelect", {
      }).then(res => {
        this.subjectList = res.data.data
        
      })
    },
    getclass() {
      this.$http.post(this.baseUrl + "teacher/clazzSelect", {
      }).then(res => {
        this.classList = res.data.data
        
      })
    },
    // 根据id查对应的老师
    findteacherId() {
      this.$http.post(this.baseUrl + "teacher/teacherInfo", {
        teacherId: Number(this.teaId)
      }).then(res => {
          this.formData=res.data.data
          if(res.data.data.teacherSex == "男"){
            this.formData.teacherSex="男"
          }
          if(res.data.data.teacherSex == "女"){
            this.formData.teacherSex="女"
          }
          this.formData.subjectId=res.data.data.subjectId.substring(0,2)
          this.formData.classId=this.oldclassId
          this.formData.roleId="用户"
      })
    },
  },

  mounted() {
    this.teaId = this.$route.query.teacherinfoid
    if (this.teaId  != undefined) {
      this.showflag = false
      this.findteacherId()
    }
    this.getcourse()
    this.getclass()
    
    // this.gettitleList()
    this.findRole()
    // this.findRoleTwo()
  }
}
</script>

<style lang="less"> 
.detailbox {
   padding: 40px;

   .headr {
     display: flex;
     justify-content: space-between;
   }

   .headr b {
     cursor: pointer;
   }

   .teacherdetailForm {
     margin-top: 30px;
   }

   .teacherdetailForm .el-form-item {
     width: 37%;
     display: flex;
     float: left;
   }
   .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
      content: '';

      margin-right: 0;
      }
   .el-form-item__label {
     width: 110px;
     text-align: left;
     font-size: 20px;
     color: #333;
   }

   .el-form-item__content,
   .el-select {
     width: 300px;
   }

   .btngroup {
     display: flex;
     position: absolute;
     bottom: 5%;

     .btn {
       padding: 16px 60px;
       border: none;
       border-radius: 4px;
       color: #fff;
       margin: 10px;
       cursor: pointer;
     }

     .go {
       background: #106ab1;
     }

     .cancel {
       background: #999;
     }
   }

 }
</style>